<template>
    <el-dialog v-model="visible" title="颜色说明" width="975" draggable overflow>
        <table>
            <tbody>
                <tr :style="`color: ${item.color}`" v-for="(item, idx) of list" :key="idx">
                    <td>{{ item.title }}</td>
                    <td class="px-1">
                        <span :class="`text-center ball ball-${item.id}`">{{ '0' + item.id }}</span>
                    </td>
                    <td>{{ item.color }}</td>
                </tr>
            </tbody>
        </table>
        <template #footer>
            <el-button type="info" @click="visible = false">关闭</el-button>
        </template>
    </el-dialog>
</template>

<script setup>
const visible = defineModel();
const list = [
    {id: 1, title:'1号球', color:'#ff69b3'},
    {id: 2, title:'2号球', color:'#fe0000'},
    {id: 3, title:'3号球', color:'#ce4621'},
    {id: 4, title:'4号球', color:'#dca81f'},
    {id: 5, title:'5号球', color:'#008001'},
    {id: 6, title:'6号球', color:'#1aadda'},
    {id: 7, title:'7号球', color:'#400097'},
    {id: 8, title:'预选号', color:'#9500d5'},
]
</script>